import { PureComponent } from 'react'
import { Modal, Form,  Input, Select, InputNumber, DatePicker} from 'antd'
import styles from './customerModal.less'
const FormItem = Form.Item
const { Option } = Select
@Form.create()
class CustomerModal extends PureComponent {
    handleCancel = () => {
        const { onCancel } = this.props
        onCancel()
    }
    handleOk = () => {
        const { onOk } = this.props
        onOk()
    }
    render(){
        const { visible, form } = this.props
        const { getFieldDecorator } = form
        return(
            <Modal
                title="创建客户优惠"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            >
                <Form layout="inline">
                    <FormItem label="会员号(5位)：">
                        {getFieldDecorator('labelCode', {
                        rules: [{ required: true, message: '请输入会员号!' }],
                        })(
                        <Input className={styles.customerModalInput}
                            // ref={n => { this.labelNum = n}}
                        />
                        )}
                    </FormItem>
                    <FormItem label="优惠类型：">
                        {getFieldDecorator('superCode', {
                        rules: [{ required: true, message: '请选择优惠类型!' }],
                        })(
                            <Select style={{width: '185px'}}>
                               <Option value="value">value</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="预付优惠：">
                        {getFieldDecorator('transCode', {
                        rules: [{ required: true, message: '请输入商超码!' }],
                        })(
                            <InputNumber min={1} className={styles.customerModalInput} />
                        )}
                    </FormItem>
                    <FormItem label="到付优惠：">
                        {getFieldDecorator('transCode', {
                        rules: [{ required: true, message: '请输入商超码!' }],
                        })(
                            <InputNumber min={1} className={styles.customerModalInput} />
                        )}
                    </FormItem>
                    <FormItem label="优惠开始时间：">
                        {getFieldDecorator('transCode', {
                        rules: [{ required: true, message: '请输入商超码!' }],
                        })(
                            <DatePicker  className={styles.customerModalInput} />
                        )}
                    </FormItem>
                    <FormItem label="优惠结束时间：">
                        {getFieldDecorator('transCode', {
                        rules: [{ required: true, message: '请输入商超码!' }],
                        })(
                            <DatePicker  className={styles.customerModalInput} />
                        )}
                    </FormItem>
                    <FormItem label="支付类型：">
                        {getFieldDecorator('superCode', {
                        rules: [{ required: false, message: '请选择优惠类型!' }],
                        })(
                            <Select style={{width: '185px'}}>
                               <Option value="value">value</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="重量等级(KG)：">
                        {getFieldDecorator('transCode', {
                        rules: [{ required: true, message: '请输入商超码!' }],
                        })(
                            <InputNumber min={1} className={styles.customerModalInput} />
                        )}
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}
export default CustomerModal